<template>
  <el-row :gutter="20"
          id="designProductConsStyle">
    <el-form :model="requestParams"
             ref="form"
             :rules="rules"
             :disabled="todos==3?true:false"
             label-width="125px">
      <el-col :span="24">
        <el-form-item label="合同名称:"
                      size="medium"
                      :prop="todos==3?'':'order_id'">
          <el-select v-model="requestParams.order_id"
                     filterable
                     placeholder="请选择"
                     size="medium"
                     class="select-style">
            <el-option v-for="item in contractArr"
                       :key="item.order_id"
                       :label="item.contract_name"
                       :value="item.order_id">
            </el-option>
          </el-select>
          <!-- <el-input v-model="requestParams.cop_vol" size="medium" placeholder="请输入合同名称" ></el-input> -->
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="专业类型:"
                      size="medium"
                      :prop="todos==3?'':'struct_type'">
          <el-select v-model="requestParams.struct_type"
                     filterable
                     placeholder="请选择"
                     size="medium"
                     class="select-style">
            <el-option v-for="item in structArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件总数(个):"
                      size="medium"
                      :prop="todos==3?'':'cop_num'">
          <el-input-number v-model="requestParams.cop_num"
                           controls-position="right"
                           size="medium"
                           :precision="0"
                           :step="1"
                           :min="0"
                           :max="10000"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件总方量(m³):"
                      size="medium"
                      :prop="todos==3?'':'cop_vol'">
          <el-input v-model="requestParams.cop_vol"
                    size="medium"
                    placeholder="请输入构件总方量(m³)"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    :max="1000000"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="市场价(元):"
                      size="medium">
          <el-input v-model="requestParams.price"
                    size="medium"
                    placeholder="请输入市场价(元)"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    :max="1000000"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="生产完成时间:"
                      size="medium"
                      :prop="todos==3?'':'finish_time'">
          <el-date-picker v-model="requestParams.finish_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="创建日期:"
                      size="medium"
                      :prop="todos==3?'':'add_time'">
          <el-date-picker v-model="requestParams.add_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24"
              class="bottom-box"
              v-show="todos==3?false:true">
        <el-button size="medium"
                   @click="onCancel">取消</el-button>
        <el-button type="primary"
                   size="medium"
                   @click="onSure('form')">确定</el-button>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import moment from 'moment'
import { ProductManageApi } from '@/services/WorkCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  props: {
    todos: Number,
    catchBack: Function,
    catchSave: Function,
    detailObj: Object
  },
  data () {
    return {
      contractArr: [],
      structArr: [],
      requestParams: {
        order_id: '',
        struct_type: '',
        cop_num: undefined,
        cop_vol: '',
        price: '',
        finish_time: '',
        business_type: '2',
        add_time: ''
      },
      rules: {
        order_id: [
          { required: true, message: '合同名称不能为空', trigger: 'change' }
        ],
        struct_type: [
          { required: true, message: '专业类型不能为空', trigger: 'change' }
        ],
        cop_num: [
          { required: true, message: '构件总数(个)不能为空', trigger: 'change' }
        ],
        cop_vol: [
          { required: true, message: '构件总方量(m³)不能为空', trigger: 'change' }
        ],
        price: [
          { required: true, message: '市场价(元)不能为空', trigger: 'change' }
        ],
        finish_time: [
          { required: true, message: '生产完成时间不能为空', trigger: 'change' }
        ],
        add_time: [
          { required: true, message: '创建日期不能为空', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    getProductOrderData () {//订单列表数据
      return ProductManageApi.getProductOrderData({
        params: {
          is_page: 0,//不分页下拉
        }
      }).then((res) => {
        this.contractArr = [];
        this.contractArr = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取标准码
    getStardandCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtStructName'
        }
      }).then((res) => {
        this.structArr = res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
    handleChange (value) {
      console.log(value);
    },
    //取消
    onCancel () {
      this.$refs['form'].resetFields();
      this.catchBack();
    },
    //详情
    getComponentDetail () {
      ProductManageApi.getComponentDetail({
        params: {
          id: this.detailObj.cop_id
        }
      }).then((res) => {
        this.requestParams = res.data;
        this.requestParams.struct_type = String(this.requestParams.struct_type);
        this.requestParams.add_time = this.requestParams.add_time.split(' ')[0]
      }).catch((error) => {
        console.log(error)
      })
    },
    //确定
    onSure (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.todos == 1) {//新增
            ProductManageApi.addComponent({
              data: this.requestParams
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('操作成功')
                this.catchSave()
              }
            }).catch((error) => {
              console.log(error)
            })
          } else if (this.todos == 2) {//编辑
            this.requestParams.id = this.detailObj.cop_id;
            ProductManageApi.editComponent({
              data: this.requestParams
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('操作成功')
                this.catchSave()
              }
            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error')
        }
      })
    }
  },
  watch: {//监听
    todos (n, o) {
      if (n == 0) {
        this.requestParams.add_time = moment().format('YYYY-MM-DD');//获取当前系统时间
        this.requestParams.price = '';
        this.$refs['form'].resetFields();
      } else {
        this.getProductOrderData();//合同下拉
        this.getStardandCode();//专业类型标准码
      }
      if (n == 2 | n == 3) {
        this.getComponentDetail();
      }
      console.log('watch-todos=', n, 'this.requestParams=', this.requestParams)
    }
  },
  async created () {
    this.requestParams.add_time = moment().format('YYYY-MM-DD');//获取当前系统时间
    await this.getProductOrderData();//合同下拉
    await this.getStardandCode();
    if (this.todos == 2 | this.todos == 3) {
      this.getComponentDetail();
    }
    console.log('created-todos=', this.todos, 'this.requestParams=', this.requestParams)
  }
}
</script>

<style lang="scss" scoped>
.select-style {
  width: 100%;
}
.bottom-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 4px;
}
.select-style {
  width: 100% !important;
}
.el-col-12 {
  padding-left: 0px !important;
}
p {
  margin-top: 18px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
}
</style>